<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maxinum-scale=1.0, user-scale=no">
    <title>tooth</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.js"></script>
</head>
<body>
    <div id="app">
        <div class="header flex">
            <div class="left flex">
                <div class="logo"><span>这里是LOGO</span></div>
                <div class="navbar">
                    <ul class="nav flex">
                        <li class="sel">
                            <a class="flex-inline">
                                <img src="./img/manage.png" >
                                <span>病历管理</span>
                            </a>
                        </li>
                        <li>
                            <a class="flex-inline">
                                <img src="./img/loadding.png" >
                                <span>下载</span>
                            </a>
                        </li>
                        <li>
                            <a class="flex-inline">
                                <img src="./img/setting.png" >
                                <span>个人中心</span>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
            <div class="right flex flex-y-end">
                <div class="flex-inline">
                    <img src="./img/server.png">
                    <a>客服留言</a>
                </div>
                <div class="flex-inline">
                    <img src="./img/language.png">
                    <a>中/EN</a>
                </div>
                <div class="flex-inline">
                    <img src="./img/doctor.png">
                    <a class="doctor">医生姓名</a>
                </div>
            </div>
        </div>
        <div class="container flex">
            <div class="left">
                <div class="flex-inline flex-inline-y">
                    <p>当前系统中待处理病例<span>20</span>例，本月病例<span>20</span>例，请您尽快处理。</p>
                    <p>2020-08-26 19:00:00</p>
                </div>
                <div class="swiper">
                    <div class="swiper-container">
                        <!-- 轮播图主体 -->
                        <div class="swiper-item flex">
                            <img src="./img/banner.png" alt="1">
                            <img src="./img/banner.png" alt="2">
                            <img src="./img/banner.png" alt="3">
                            <img src="./img/banner.png" alt="4">
                            <img src="./img/banner.png" alt="5">
                        </div>
                        <!-- 左右箭头 -->
                        <a class="prev"><img src="./img/prev.png"></a>
                        <a class="next"><img src="./img/next.png"></a>
                        <!-- 轮播图指示器 -->
                        <ul class="swiper-indicator flex flex-y-center">
                            <li data-num="0" onclick="" class="active"></li>
                            <li data-num="1" onclick=""></li>
                            <li data-num="2" onclick=""></li>
                            <li data-num="3" onclick=""></li>
                            <li data-num="4" onclick=""></li>
                        </ul>
                    </div>
                </div>
                <!-- <div>过去12月病例数量趋势</div> -->
                <div>
                    <div id="main" style="width: 100%;height:400px;"></div>
                </div>
            </div>
            <div class="right">
                <div class="search flex">
                    <div class="search-input">
                        <input type="text" placeholder="根据关键字搜索病例">
                    </div>
                    <a class="btn-search">搜索</a>
                    <a class="btn-add">添加病例</a>
                </div>
                <div class="navbar flex">
                    <ul class="nav flex flex-y-start">
                        <li class="sel">
                            <div><span>全部病例</span></div>
                        </li>
                        <li>
                            <div class="flex-inline flex-inline-y flex-inline-center">
                                <img src="./img/undeal.png">
                                <span>待处理</span>
                            </div>
                        </li>
                        <li>
                            <div class="flex-inline flex-inline-y flex-inline-center">
                                <img src="./img/deal.png">
                                <span>处理中</span>
                            </div>
                        </li>
                    </ul>
                    <a class="btn-reset">重置</a>
                </div>
                <div class="list">
                    <div class="list-btns flex">
                        <div>查找病例</div>
                        <div>患者姓名</div>
                        <div>病例起始时间</div>
                        <div>病例结束时间</div>
                    </div>
                    <div class="list-body">
                        <table>
                            <thead>
                                <tr class="list-title">
                                    <td>头像</td>
                                    <td>姓名</td>
                                    <td>年龄</td>
                                    <td>产品类型</td>
                                    <td>阶段</td>
                                    <td>查看操作</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                                <tr class="content">
                                    <td><img src="img/img_03.png"></td>
                                    <td>张三</td>
                                    <td>15</td>
                                    <td>隐形托槽</td>
                                    <td>托槽设计待确认</td>
                                    <td class="flex flex-y-center operate">
                                        <img src="./img/plan.png">
                                        <span class="design">排牙方案</span>
                                        <img src="./img/design.png">
                                        <span class="design">托槽设计</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 轮播图
        var swiper_container=document.querySelector('.swiper-container');
        var swiper_item=document.querySelector('.swiper-item');
        var prev=document.querySelector('.prev');
        var next=document.querySelector('.next');
        var lis=document.querySelectorAll('.swiper-indicator>li');
        var time;
        var num=0;
        // 0  1   2    3   4
        // 1  2   3    4   5
        // 0 480 920 1440 1920
        function Next(){
            ++num;
            // console.log(num);
            swiper_item.style.transition='left 1s';
            if(num>4){
                num=0;  
                swiper_item.style.transition='left 0s';
            } 
            swiper_item.style.left=`-${num*480}px`;
            for(var li of lis){
                li.className='';
            }
            lis[num].className='active';
            // console.log(swiper_item.style.left);
        }
        function Prev(){
            num--;
            swiper_item.style.transition='left 1s';
            if(num<0){
                num=4;
                swiper_item.style.transition='left 0s';
            } 
            swiper_item.style.left=`-${num*480}px`;
            for(var li of lis){
                li.className='';
            }
            lis[num].className='active';
        }
        time=setInterval('Next()',2000);
        next.addEventListener('click',Next);
        prev.addEventListener('click',Prev);
        for(var i=0;i<lis.length;i++){
            jump(i);
        }
        function jump(i){
            // console.log(i);
            lis[i].addEventListener('click',function(e){
                var num=e.target.dataset.num;
                swiper_item.style.transition='left 0s';
                swiper_item.style.left=`-${num*480}px`;
                for(var li of lis){
                    li.className='';
                }
                lis[num].className='active';
                // console.log(e.target.dataset.num);
            });
        }
        swiper_container.addEventListener('mouseover',function(){
            clearInterval(time);
        });
        swiper_container.addEventListener('mouseout',function(){
            time= setInterval('Next()',2000)
        });

    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                x:'center',
                size:"12px",
                text: '过去12月病例数量趋势'
            },
            tooltip: {},
            xAxis: {
                axisLabel: {
                    interval:0,
                },
                axisTick:{ //y轴刻度线
                    show:false
                },
                axisLine:{ //y轴
                    show:false
                },
                boundaryGap: false,
                data: ['',"14:35","14:40","14:45","14:50","15:00","15:05","15:10","15:15","15:20","15:25"]
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                min: '0',
                max:'100',
                axisTick:{ //y轴刻度线
                    show:false
                },
                axisLine:{ //y轴
                    show:false
                }
            },
            series: [{
                type:'line',
                color:'#5bd3ac',
                symbol:'none', //去掉折线图中的节点
                smooth: true,  //true 为平滑曲线，false为直线
                data: [30,40, 50, 50, 40, 35, 45,40,58,55,60,50]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>